<template>
  <a-table
    :columns="columns"
    :pagination="{
      current: query.pageNum,
      total: query.total,
      pageSize: pageSize
    }"
    @page-change="pageChange"
    :data="table.data"
    :row-selection="{
      type: rowSelection
    }"
    :loading="table.loading"
    @select="onSelect"
    :row-key="table.rowKey"
    v-model:selectedKeys="props.table.keys"
  >
  </a-table>
</template>

<script setup lang="ts">
import { IQuery, TableConfig } from "@/interface/IAxios";
import { TableColumnData, TableData } from "@arco-design/web-vue";
const emit = defineEmits(["getList", "search", "select"]);

const props = withDefaults(
  defineProps<{
    query: IQuery;
    table: TableConfig<any>;
    columns: TableColumnData[];
    rowSelection?: "radio" | "checkbox";
    /* 是否有额外数据,针对门店数据 */
    hasExtraData?: boolean;
  }>(),
  {
    rowSelection: "radio",
    hasExtraData: false
  }
);
const onSelect = (rowKeys: string[], rowKey: string, record: TableData) => {
  emit("select", {
    rowKeys,
    rowKey,
    record
  });
};
const pageChange = (pageNum: number) => {
  props.query.pageNum = pageNum;
  emit("getList");
};

const pageSize = computed(() => {
  return props.query.pageSize + (props.hasExtraData ? 1 : 0);
});
</script>

<style lang="scss" scoped></style>
